// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')

// 1.2 配置选项
const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);

$('button:contains("上传")').on('click', function () {
    $('#file').trigger('click')
})
$('#file').on('change', function () {
    let myfile = this.files[0]
    let url = URL.createObjectURL(myfile)
    $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', url)  // 重新设置图片路径
        .cropper(options)
})
$('button:contains("确定")').on('click', function () {
    var dataURL = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    })
    let base64 = dataURL.toDataURL('image/png')
    $.ajax({
        type: 'post',
        url: '/my/update/avatar',
        data: { avatar: base64 },
        success: function (res) {
            layer.msg(res.message);
            window.parent.getUserInfo();
        }
    })
})